$(document).ready(function(){
	/* This code is executed after the DOM has been completely loaded */
	
	/* Defining an array with the tab text and AJAX pages: */
	var Tabs = {
		// 'Монитор'	: '../oldmonitor/index2.php',
		'Монитор'	: '../monitor/index.php',
		'Группы'	: '../groups/modul.php',
		'Проекты'	: '../projects/modul.php',
		'Настройки групп'	: '../groups_settings/modul.php'
	}
	
	/* The available colors for the tabs: */
	var colors = ['orange','orange','orange','orange'];
	
	/* The colors of the line above the tab when it is active: */
	var topLineColor = {
		blue:'lightblue',
		green:'lightgreen',
		red:'red',
		orange:'orange'
	}
	
	/* Looping through the Tabs object: */
	var z=0;
	$.each(Tabs,function(i,j){
		/* Sequentially creating the tabs and assigning a color from the array: */
		var tmp = $('<li><a href="#" class="tab '+colors[(z++%4)]+'">'+i+' <span class="left" /><span class="right" /></a></li>');
		
		/* Setting the page data for each hyperlink: */
		tmp.find('a').data('page',j);
		
		/* Adding the tab to the UL container: */
		$('ul.tabContainer').append(tmp);
	})

	/* Caching the tabs into a variable for better performance: */
	var the_tabs = $('.tab');
	
	the_tabs.click(function(e){
		/* "this" points to the clicked tab hyperlink: */
		var element = $(this);
		
		
		/* Detecting the color of the tab (it was added to the class attribute in the loop above): */
		
		var bg = element.attr('class').replace('tab ','');

		// element.addClass('bluek');
		$('.tab').css('color','black');
		element.css('color','blue');
		
		
		//$('#contentHolder').attr('src', element.data('page')).css('height','500').clone().remove();//////////
		
		
		e.preventDefault();
		window.location.href = element.data('page');
	 
		
	})
	
	/* Emulating a click on the first tab so that the content area is not empty: */
	//the_tabs.eq(0).click();
	
});
